<template>
	<view class="" style="background-color: #F8F8F8;">

		<view class="nav-back">
			<top-heigth back-title="推广分享"></top-heigth>
		</view>
			
		
		
		<view class="content-box">
			<view class="public-box m-t24">
				<view class="notice-list">
					<view class="down-font">
						
					</view>
					<view class="down-font-box">
						<canvas canvas-id="qrcode" />
					</view>
					<view class="login-but2" @click="saveImage">保存图片</view>
				</view>
			</view>
			
		</view>
		
		
	</view>
</template>

<script>
	import TopHeigth from '@/components/TopHeigth.vue'
	import uqrcode from '@/util/uqrcode.js'

	export default {
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
			}
		},
		components: { TopHeigth },
		onLoad() {
			uni.$u.http.post('/api/shop/v1_0/tAppChannelRCA/checkTAppChannelInfo',{
				id:this.userInfo.id,
			}).then((res) => {
				uqrcode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: "http://app.dongfangdaojia.com/?channel=" + res.data,
					size: 250,
					margin: 30,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uqrcode.errorCorrectLevel.H,
				})
			})

		},
		methods: {
			saveImage(){
				uni.canvasToTempFilePath({
				  canvasId: 'qrcode',
				  success: function(res) {
				    // 在H5平台下，tempFilePath 为 base64 
					uni.saveImageToPhotosAlbum({
						filePath: res.tempFilePath,
						success(res) {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							})
						},
						fail(err) {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							})
							console.log('err', err);
						}
					});
				  } 
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: $direction;
	}
	.down-font-box {
		width: 500rpx;
		height: 500rpx;
		margin: 0 auto;
		margin-top: 20rpx;

		>canvas {
			width: 100%;
			height: 100%;
		}
	}
</style>
